<template>
  <div class="header">
    <a-form layout="inline" class="form">
      <a-form-item label="类型">
        <a-select v-model:value="search.speType" style="width: 120px;">
          <a-select-option :value="option.value" v-for="option in speTypeList" :key="option.value">{{ option.label }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="数量范围">
        <a-input-number v-model:value="search.minAmount" placeholder="最小数量" style="width: 80px;" /> - 
        <a-input-number v-model:value="search.maxAmount" placeholder="最大数量" style="width: 80px;" />
      </a-form-item>
      <a-form-item label="时间">
        <a-range-picker v-model:value="search.date" />
      </a-form-item>
      <a-form-item label="参与项目ID">
        <a-input v-model:value="search.tid" placeholder="输入参与项目ID" />
      </a-form-item>
      <a-form-item label="会员ID">
        <a-input v-model:value="search.memberId" placeholder="输入会员ID" />
      </a-form-item>
      <a-form-item label="手机号">
        <a-input v-model:value="search.mobile" placeholder="输入手机号" />
      </a-form-item>
      <a-form-item label="姓名">
        <a-input v-model:value="search.realname" placeholder="输入姓名" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="getTableData">查询</a-button>
        <a-button @click="onReset" class="btn">重置</a-button>
        <a-button type="success" class="btn" @click="onExport">导出</a-button>
      </a-form-item>
    </a-form>
  </div>
  <TablePage 
    :dataSource="dataSource"
    :columns="columns" 
    :paginationData="paginationData"
    @change="pageChange"
    @showSizeChange="showSizeChange"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'createTime'">
        {{proxy.$filters.formatTime(record.createTime)}}
      </template>
      <template v-else-if="column.dataIndex === 'amount'">
        {{ record.amount > 0 ? '+' : '' }}{{ record.amount }}
      </template>
    </template>
  </TablePage>
</template>

<script setup>
import { useRoute } from 'vue-router'
import TablePage from "@/components/TablePage/index.vue"
import { usePagination } from "@/useHooks/usePagination"
import { amountList } from '@/api/record';
import { downloadFile } from '@/utils/index'
import { reactive, ref, watch, onMounted, computed } from 'vue'
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()

const speTypeList = ref([
  { label: '全部', value: null },
  { label: '答题成功', value: 1 },
  { label: '邀请注册', value: 2 },
  { label: '分享答题成功', value: 3 },
  { label: '签到奖励', value: 4 },
  { label: '兑换失败', value: 5 },
  { label: '商品兑换', value: 10 },
  { label: '答题数据作废', value: 11 },
  { label: '分享数据作废', value: 12 },
])
const route = useRoute()
onMounted(() => {
  if (route.query.memberId)search.memberId = route.query.memberId
  getTableData()
})
const dataSource= ref([])
const columns = computed(() => {
  const arr = [
    {
      title: 'ID',
      dataIndex: 'id',
      width: 120
    },
    {
      title: '会员ID',
      dataIndex: 'uid',
      width: 120
    },
    {
      title: '会员姓名',
      dataIndex: 'realname',
      width: 120
    },
    {
      title: '类型',
      dataIndex: 'speTypeDesc',
      width: 120
    },
    {
      title: '变更数量',
      dataIndex: 'amount',
      width: 120
    },
    {
      title: '参与项目',
      dataIndex: 'surveyTitle',
      width: 180
    },
    {
      title: '推荐人',
      dataIndex: 'sharerName',
      width: 120
    },
    {
      title: '时间',
      dataIndex: 'createTime',
      width: 140
    }
  ]
  return arr;
})
const search = reactive({
  speType: null,
  tid: undefined,
  mobile: undefined,
  realname: undefined,
  memberId: undefined,
  minAmount: undefined,
  maxAmount: undefined,
  date: []
})
const onReset = () => {
  search.speType = null
  search.mobile = undefined
  search.realname = undefined
  search.memberId = undefined
  search.tid = undefined
  search.minAmount = undefined
  search.maxAmount = undefined
  search.date = []
  getTableData()
}
const { paginationData, pageChange, showSizeChange } = usePagination()
watch(paginationData, () => {
  getTableData()
})
const getTableData = () => {
  const req = { 
    size: paginationData.pageSize,
    page: paginationData.currentPage,
    ...search
  }
  if (Array.isArray(req.date) && req.date.length >= 2 && req.date[0] && req.date[1]) {
    req.startDate = req.date[0].format('YYYY-MM-DD')
    req.endDate = req.date[1].format('YYYY-MM-DD')
  }
  delete req.date
  amountList(req).then((res) => {
    paginationData.total = res.data.total
    dataSource.value = res.data.list.map(item => ({
      ...item,
      speTypeDesc: item.speType ? speTypeList.value.find(i => i.value === item.specType).label : '',
    }))
  })
}
const onExport = () => {
  const req = { 
    size: paginationData.pageSize,
    page: paginationData.currentPage,
    ...search
  }
  if (Array.isArray(req.date) && req.date.length >= 2 && req.date[0] && req.date[1]) {
    req.startDate = req.date[0].format('YYYY-MM-DD')
    req.endDate = req.date[1].format('YYYY-MM-DD')
  }
  delete req.date
  downloadFile('/member/amountList/export',req)
}
</script>